<template>
  <div class="vehicle">
    <BottomArrow />
    <Solution :titles="solution.titles" :theme="solution.theme" :content="solution.content"/>
    <div class="our-capability">
      <MainTitle :title="'Our capability'" :sub-title="'我们的能力'" />
      <div>
        <List v-for="item in bilities"
              :title="item.title"
              :context="item.context"
              :url="item.url"
              :key="item.title"/>
      </div>
    </div>
    <ProductChart :title="'Industry ecology'"
                  :sub-title="'行业生态'"
                  :bg-size="'90%'"
                  :url="require('../assets/imgs/vehicle/industry_ecology.png')"/>
    <FooterView />
  </div>
</template>

<script>
  import BottomArrow from '../components/BottomArrow';
  import Solution from '../components/Solution';
  import MainTitle from '../components/MainTitle';
  import List from '../components/List';
  import ProductChart from '../components/ProductChart';
  import FooterView from '../components/FooterView';

  export default {
    name: "Vehicle",
    data() {
      return {
        solution: {
          titles: ['Intelligent', 'vehicle', 'solutions'],
          theme: {
            title: '智能汽车解决方案',
            descrips: ['智能语音交互 深度整合行业上下游']
          },
          content:
            '在汽车智能时代下，智询希冀通过智能语音交互的手段切入汽车后市场并整合后市场中部分乃至整体业务，实现上游供应及下游服务的全覆盖，利用互联网、大数据、信息管理等技术支持，重塑车企与用户的服务关系，打造高品质的全方位用户体验。'
        },
        bilities: [
          {title: '数据优势', url: require('../assets/imgs/vehicle/bility1.png'), context: '立足维修保养、汽配两大汽车售后刚需市场，整合服务内容，实现系统内业务联动最终形成汽车后市场中的全方位服务平台。'},
          {title: '智能交互能力', url: require('../assets/imgs/vehicle/bility2.png'), context: '集合多模态及情感化交互体验，依托人工智能技术，以全新的人车智能语音交互为用户打造更具“懂我能力”的用户体验。'},
          {title: '服务整合能力', url: require('../assets/imgs/vehicle/bility3.png'), context: '  记录用户车辆数据、行为数据及服务数据，在数据整合分析的基础上智能化推荐相关服务，从而提升行业整体服务效率进而强化品牌形象。'}
        ]
      };
    },
    components: {
      BottomArrow,
      Solution,
      MainTitle,
      List,
      ProductChart,
      FooterView
    }
  };
</script>

<style lang="less">
  .vehicle {
    position: relative;
  }
  .our-capability {
    margin-top: 100px;
    margin-bottom: 100px;
  }

  @media screen and (max-width: 768px) {
    .vehicle {
      position: relative;
    }
    .our-capability {
      margin-top: 50px;
      margin-bottom: 50px;
    }
  }
</style>
